<template>
  <SearchBar @search="onSearch" />
  <el-button @click="cateAddDialogVisible = true">新增商品分类</el-button>
  <el-table :data="cates" row-key="id">
    <el-table-column prop="cateName" label="分类名称" />
    <el-table-column prop="cateIcon" label="分类图标">
      <template #default="{ row }">
        <img :src="row.cateIcon" alt="" style="width: 50px; height: 50px" />
      </template>
    </el-table-column>
    <el-table-column prop="order" label="排序">
      <template #default="{ row }">
        <el-input-number
          v-model="row.order"
          @change="changeCateOrder(row.id, row.order)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="cateStatus" label="状态">
      <template #default="{ row }">
        <el-switch
          v-model="row.cateStatus"
          :active-value="0"
          :inactive-value="1"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          @change="changeCateStatus(row.id, row.cateStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          type="primary"
          @click="showUpdateDialog(row.id)"
          :icon="Edit"
        ></el-button>
        <el-button type="danger" :icon="Delete"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增商品分类弹窗 -->
  <el-dialog width="50%" title="新增分类" v-model="cateAddDialogVisible">
    <CateAdd />
  </el-dialog>
  <!-- /新增商品分类弹窗 -->

  <!-- 修改商品分类弹窗 -->
  <el-dialog width="50%" title="修改商品分类" v-model="cateEditDialogVisible">
    <CateUpdate :cateId="updateCateId" />
  </el-dialog>
  <!-- /修改商品分类弹窗 -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCates } from "@/api/cate";
import type { Cate } from "@/types/cate";
import { Edit, Delete } from "@element-plus/icons-vue";
import SearchBar from "@/components/SearchBar.vue";
import CateAdd from "./components/CateAdd.vue";
import CateUpdate from "./components/CateUpdate.vue";

// 请求商品分类列表功能开始
const cates = ref<Cate[]>();
let searchParams = {};
// 搜索功能
const onSearch = (_searchParams: object) => {
  searchParams = _searchParams;
  fetchCates();
};
const fetchCates = () => {
  getCates(searchParams).then((res: any) => {
    if (res.code === 200) {
      cates.value = res.data;
    }
  });
};
onMounted(() => {
  fetchCates();
});
// 请求商品分类列表功能结束

// 行内修改 分类排序
const changeCateOrder = (id: number, order: number) => {
  console.log(id, order);
};

// 行内修改 商品分类状态
const changeCateStatus = (id: number, cateStatus: number) => {
  console.log(id, cateStatus);
};

// 新增商品分类 弹窗
const cateAddDialogVisible = ref(false);
defineOptions({
  name: "CateLists",
});

// 修改商品分类弹窗
const cateEditDialogVisible = ref(false);
// 点击编辑按钮 显示修改商品分类弹窗
let updateCateId = 0;
const showUpdateDialog = (id: number) => {
  cateEditDialogVisible.value = true;
  updateCateId = id;
};
</script>

<style scoped></style>
